<template>
	<div>
		<Card class="content-card">
			<Tabs :animated="false" @on-click="clickTabs">

				<ButtonGroup slot="extra">
					<Button type="primary" size="small" icon="md-refresh" @click="refreshData"></Button>
				</ButtonGroup>

				<TabPane label="待审核列表" name="to">
					<Table border :columns="to.columnsTo" :data="to.dataTo" :loading="to.loadingTo"></Table>
					<div style="margin: 10px;overflow: hidden">
						<div style="float: right;">
							<Page :total="to.totalTo" :current="1" show-sizer show-total transfer @on-change="changeToPage"
							 @on-page-size-change="changeToSizePage"></Page>
						</div>
					</div>
				</TabPane>

				<TabPane label="已审核列表" name="auditList">
					<div style="margin-bottom:10px;">
						<Select style="width:200px" v-model="params.orderType">
							<Option :value="1">平台审核通过</Option>
							<Option :value="2">平台审核未通过</Option>
							<Option :value="3">卖家审核通过</Option>
							<Option :value="4">卖家审核未通过</Option>
							<Option :value="5">确认发货</Option>
							<Option :value="6">确认收货</Option>
							<Option :value="7">退货中</Option>
							<Option :value="8">退货成功</Option>
							<Option :value="9">取消</Option>
						</Select>
						<Button @click="queryByType" type="primary">查询</Button>
					</div>
					<Table border :columns="audit.columnsAudit" :data="audit.dataAudit" :loading="audit.loadingAudit"></Table>
					<div style="margin: 10px;overflow: hidden">
						<div style="float: right;">
							<Page :total="audit.totalAudit" :current="1" show-sizer show-total transfer @on-change="changeAuditPage"
							 @on-page-size-change="changeAuditSizePage"></Page>
						</div>
					</div>
				</TabPane>
			</Tabs>
		</Card>
		<toAudit ref="toAudit" @table='queryToAuditList()'></toAudit>
		<orderDetail ref="orderDetail" @table='queryAuditList()'></orderDetail>
	</div>
</template>

<script>
	import toAudit from './toAudit'
	import orderDetail from './orderDetail'
	import {
		formatDate
	} from '../utils/time.js'

	export default {
		name: "order",
		components: {
			toAudit,
			orderDetail
		},
		data() {
			return {
				params:{
					pageNo:1,
					pageSize:10,
					orderType:''
				},
				//tab点击之后的名称
				tabsName: 'to',

				to: {
					totalTo: 0,
					loadingTo: false,
					paramsTo: {
						pageNo: '1',
						pageSize: '10',
						orderType: '0'
					},
					columnsTo: [{
							title: '序号',
							type: 'index',
							width: 80,
							align: 'center'
						},
						{
							title: '订单号',
							key: 'orderNum',
							minWidth: 120
						},
						{
							title: '车辆信息',
							minWidth: 150,
							render: (h, params) => {
								return h('div', [
									h('img', {
										attrs: {
											src: params.row.car.carPhoto
										},
										style: {
											width: "80px",
											height: "80px",
											margin: "5px"
										}
									}),
									h('div', {
											style: {
												display: "inline-block",
												margin: "50px 0 0 10px",
												position: "absolute"
											}
										},
										params.row.car.carName),
								])
							}
						},
						{
							title: '车辆类型',
							minWidth: 100,
							render: (h, params) => {
								return h('div', [

									h('div', params.row.car.typeName),
								])
							}
						},
						{
							title: '单价',
							minWidth: 100,
							align: 'center',
							render: (h, params) => {
								return h('div', [

									h('div', params.row.car.carMoney),
								])
							}
						},
						{
							title: '买家',
							key: 'buyersTel',
							minWidth: 100,
							align: 'center'
						},
						// {
						// 	title: '卖家',
						// 	key: 'loginNum',
						// 	minWidth: 100,
						// 	align: 'center'
						// },
						{
							title: '日期',
							key: 'createTime',
							minWidth: 100,
							align: 'center',
							render: (h, params) => {
								return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
							}
						},
						{
							title: '操作',
							minWidth: 150,
							key: 'action',
							render: (h, params) => {
								return h('div', [
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginLeft: '10px'
										},
										on: {
											click: () => {
												this.toAuditShow(params)


											}
										}
									}, '确认收款')
								])
							}
						}
					],
					dataTo: []
				},
				audit: {
					totalAudit: 0,
					loadingAudit: false,
					orderStatusList: {
						0: '待审核',
						1: '平台审核通过',
						2: '平台审核未通过',
						3: '卖家审核通过',
						4: '卖家审核未通过',
						5: '确认发货',
						6: '确认收货',
						7: '退货中',
						8: '退货成功',
						9: '取消'
					},
					paramsAudit: {
						pageNo: '1',
						pageSize: '10',
						orderType: '0'
					},
					columnsAudit: [{
							title: '序号',
							type: 'index',
							width: 80,
							align: 'center'
						},
						{
							title: '订单号',
							key: 'orderNum',
							minWidth: 120
						},
						{
							title: '车辆信息',
							minWidth: 150,
							render: (h, params) => {
								return h('div', [
									h('img', {
										attrs: {
											src: params.row.car.carPhoto
										},
										style: {
											width: "80px",
											height: "80px",
											margin: "5px"
										}
									}),
									h('div', {
										style: {
											display: "inline-block",
											margin: "40px 0 0 10px",
											position: "absolute"
										}
									}, params.row.car.carName)
								])
							}
						},
						{
							title: '车辆类型',
							minWidth: 100,
							render: (h, params) => {
								return h('div', [

									h('div', params.row.car.typeName),
								])
							}
						},
						{
							title: '单价',
							minWidth: 100,
							align: 'center',
							render: (h, params) => {
								return h('div', [

									h('div', params.row.car.carMoney),
								])
							}
						},
						{
							title: '买家',
							key: 'buyersTel',
							minWidth: 100,
							align: 'center'
						},
						{
							title: '卖家',
							key: 'sellerTel',
							minWidth: 100,
							align: 'center'
						},
						{
							title: '状态',
							minWidth: 100,
							align: 'center',
							render: (h, params) => {
								return h('div', this.audit.orderStatusList[params.row.orderType])
							}
						},
						{
							title: '日期',
							key: 'createTime',
							minWidth: 100,
							align: 'center',
							render: (h, params) => {
								return h('div', formatDate(new Date(params.row.createTime), 'yyyy-MM-dd hh:mm'))
							}
						},
						{
							title: '操作',
							minWidth: 150,
							key: 'action',
							render: (h, params) => {
								return h('div', [
									h('Button', {
										props: {
											type: 'primary',
											size: 'small'
										},
										style: {
											marginLeft: '10px'
										},
										on: {
											click: () => {
												this.$refs['orderDetail'].show(params)
											}
										}
									}, '查看详情')
								])
							}
						}
					],
					dataAudit: []
				},


				modalType: ''
			}
		},
		mounted() {
			// 查询待审核列表
			this.queryToAuditList();
		},
		methods: {
			refreshData() {
				this.$refs['tableView'].getData()
			},
			operationDone() {
				this.$refs['tableView'].getData()
			},
			//查询待审核列表
			queryToAuditList() {
				this.$http.post('/old/order/type/list', this.to.paramsTo).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.to.totalTo = res.data.data.total;
							this.to.dataTo = res.data.data.rows;
						}
					}
				});
			},
			//查询已审核列表
			queryAuditList() {
				this.$http.post('/old/order/audit/list', this.to.paramsAudit).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.audit.totalAudit = res.data.data.total;
							this.audit.dataAudit = res.data.data.rows;
						}
					}
				});
			},
			// 点击Tabs
			clickTabs(res) {
				this.tabsName = res;
				// 判断点击的标签
				switch (res) {
					case 'to':
						// 查询待审核
						this.queryToAuditList();
						break;
					case 'auditList':
						// 查询已审核列表
						this.queryAuditList();
						break;
				}
			},
			// 改变待审核当前页
			changeToPage(res) {
				this.to.paramsTo.pageNo = res;
				this.queryToAuditList();
			},
			// 改变待审核当前页容量
			changeToSizePage(res) {
				this.to.paramsTo.pageSize = res;
				this.queryToAuditList();
			},
			// 改变已审核当前页
			changeAuditPage(res) {
				this.to.paramsTo.pageNo = res;
				this.queryToAuditList();
			},
			// 改变已审核当前页容量
			changeAuditSizePage(res) {
				this.to.paramsTo.pageSize = res;
				this.queryToAuditList();
			},
			toAuditShow(res) {
				this.$refs.toAudit.show(res);
			},
			queryByType(){
				console.log(this.params)
				this.$http.post('/old/order/type/list', this.params).then(res => {
					if (res.status == 200) {
						if (res.data.code == 200) {
							this.audit.totalAudit = res.data.data.total;
							this.audit.dataAudit = res.data.data.rows;
						}
					}
				});
			}
		}
	}
</script>

<style>
</style>
